<template>
    <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
    <div id='map-overlay' class='map-overlay'></div>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"
import MapboxCommonService from "@/service/map/MapboxCommonService"

export default {
    name: "AddHoverFilter.component",
    components: {Mapbox},
    setup() {

        let mapStore = ref({});
        let mapOnLoadCB = (map) => {
            mapStore.value = map;
            MapboxCommonService.setCZBP(map, [-98, 38.88], 3)

            let overlay = document.getElementById('map-overlay');
            // Create a popup, but don't add it to the map yet.
            let popup = new mapboxgl.Popup({
                closeButton: false
            });
            // Add the source to query. In this example we're using
            // county polygons uploaded as vector tiles
            map.addSource('counties', {
                "type": "vector",
                "url": "mapbox://mapbox.82pkq93d"
            });

            map.addLayer({
                "id": "counties",
                "type": "fill",
                "source": "counties",
                "source-layer": "original",
                "paint": {
                    "fill-outline-color": "rgba(0,0,0,0.1)",
                    "fill-color": "rgba(0,0,0,0.1)"
                }
            }, 'settlement-label'); // Place polygon under these labels.

            map.addLayer({
                "id": "counties-highlighted",
                "type": "fill",
                "source": "counties",
                "source-layer": "original",
                "paint": {
                    "fill-outline-color": "#484896",
                    "fill-color": "#6e599f",
                    "fill-opacity": 0.75
                },
                "filter": ["in", "COUNTY", ""]
            }, 'settlement-label'); // Place polygon under these labels.

            map.on('mousemove', 'counties', function (e) {
                // Change the cursor style as a UI indicator.
                map.getCanvas().style.cursor = 'pointer';

                // Single out the first found feature.
                let feature = e.features[0];

                // Query the counties layer visible in the map. Use the filter
                // param to only collect results that share the same county name.
                let relatedFeatures = map.querySourceFeatures('counties', {
                    sourceLayer: 'original',
                    filter: ['in', 'COUNTY', feature.properties.COUNTY]
                });

                // Render found features in an overlay.
                overlay.innerHTML = '';

                // Total the population of all features
                let populationSum = relatedFeatures.reduce(function (memo, feature) {
                    return memo + feature.properties.population;
                }, 0);

                let title = document.createElement('strong');
                title.textContent = feature.properties.COUNTY + ' (' + relatedFeatures.length + ' found)';

                let population = document.createElement('div');
                population.textContent = 'Total population: ' + populationSum.toLocaleString();

                overlay.appendChild(title);
                overlay.appendChild(population);
                overlay.style.display = 'block';

                // Add features that share the same county name to the highlighted layer.
                map.setFilter('counties-highlighted', ['in', 'COUNTY', feature.properties.COUNTY]);

                // Display a popup with the name of the county
                popup.setLngLat(e.lngLat)
                    .setText(feature.properties.COUNTY)
                    .addTo(map);
            });

            map.on('mouseleave', 'counties', function () {
                map.getCanvas().style.cursor = '';
                popup.remove();
                map.setFilter('counties-highlighted', ['in', 'COUNTY', '']);
                overlay.style.display = 'none';
            });
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style scoped lang="scss">
.map-overlay {
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
    border-radius: 3px;
    position: absolute;
    width: 20%;
    top: 10px;
    left: 10px;
    padding: 10px;
    display: none;
}
</style>